<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GSAP表格动画示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            max-width: 1000px;
            margin: 0 auto;
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        th, td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        
        th {
            background-color: #f8f9fa;
            font-weight: bold;
            cursor: pointer;
            position: relative;
        }
        
        th:hover {
            background-color: #e9ecef;
        }
        
        tr:hover {
            background-color: #f5f5f5;
        }
        
        .highlight {
            background-color: #fffde7;
        }
        
        button {
            padding: 8px 16px;
            margin: 5px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        
        button:hover {
            background-color: #45a049;
        }
        
        .sort-indicator {
            margin-left: 5px;
        }
    </style>
</head>
<body>
    <h1>GSAP表格动画演示</h1>
    
    <div>
        <button id="sort-name">按姓名排序</button>
        <button id="sort-age">按年龄排序</button>
        <button id="sort-salary">按薪资排序</button>
        <button id="highlight-btn">高亮薪资>8000</button>
    </div>
    
    <table id="data-table">
        <thead>
            <tr>
                <th data-sort="name">姓名 <span class="sort-indicator"></span></th>
                <th data-sort="age">年龄 <span class="sort-indicator"></span></th>
                <th data-sort="department">部门 <span class="sort-indicator"></span></th>
                <th data-sort="salary">薪资 <span class="sort-indicator"></span></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>28</td>
                <td>市场部</td>
                <td>7500</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>32</td>
                <td>技术部</td>
                <td>9500</td>
            </tr>
            <tr>
                <td>王五</td>
                <td>25</td>
                <td>设计部</td>
                <td>6800</td>
            </tr>
            <tr>
                <td>赵六</td>
                <td>40</td>
                <td>管理层</td>
                <td>12000</td>
            </tr>
            <tr>
                <td>钱七</td>
                <td>35</td>
                <td>技术部</td>
                <td>10500</td>
            </tr>
        </tbody>
    </table>

    <!-- 引入GSAP库 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 1. 表格加载动画
            gsap.from("#data-table tbody tr", {
                duration: 0.8,
                opacity: 0,
                y: 30,
                stagger: 0.1,
                ease: "power2.out"
            });
            
            // 2. 行悬停效果
            const rows = document.querySelectorAll("#data-table tbody tr");
            rows.forEach(row => {
                row.addEventListener('mouseenter', () => {
                    gsap.to(row, {
                        duration: 0.3,
                        backgroundColor: "#f5f5f5",
                        scale: 1.01,
                        ease: "power1.out"
                    });
                });
                
                row.addEventListener('mouseleave', () => {
                    gsap.to(row, {
                        duration: 0.3,
                        backgroundColor: "white",
                        scale: 1,
                        ease: "power1.out"
                    });
                });
            });
            
            // 3. 排序功能
            let currentSort = { field: null, direction: 1 }; // 1=升序, -1=降序
            
            function sortTable(field) {
                const tbody = document.querySelector("#data-table tbody");
                const rows = Array.from(tbody.querySelectorAll("tr"));
                
                // 如果是同一字段，则反转排序方向
                if (currentSort.field === field) {
                    currentSort.direction *= -1;
                } else {
                    currentSort.field = field;
                    currentSort.direction = 1;
                }
                
                // 更新排序指示器
                document.querySelectorAll(".sort-indicator").forEach(el => el.textContent = "");
                const currentTh = document.querySelector(`th[data-sort="${field}"]`);
                currentTh.querySelector(".sort-indicator").textContent = 
                    currentSort.direction === 1 ? "↑" : "↓";
                
                // 动画：先淡出
                gsap.to(rows, {
                    duration: 0.3,
                    opacity: 0,
                    y: 20,
                    onComplete: performSort
                });
                
                function performSort() {
                    // 实际排序逻辑
                    rows.sort((a, b) => {
                        const aValue = a.querySelector(`td:nth-child(${getFieldIndex(field)})`).textContent;
                        const bValue = b.querySelector(`td:nth-child(${getFieldIndex(field)})`).textContent;
                        
                        if (field === 'age' || field === 'salary') {
                            return (parseInt(aValue) - parseInt(bValue)) * currentSort.direction;
                        } else {
                            return aValue.localeCompare(bValue) * currentSort.direction;
                        }
                    });
                    
                    // 清空表格
                    while (tbody.firstChild) {
                        tbody.removeChild(tbody.firstChild);
                    }
                    
                    // 重新添加已排序的行
                    rows.forEach(row => tbody.appendChild(row));
                    
                    // 动画：淡入
                    gsap.fromTo(rows, 
                        { opacity: 0, y: -20 },
                        {
                            duration: 0.5,
                            opacity: 1,
                            y: 0,
                            stagger: 0.05,
                            ease: "power2.out"
                        }
                    );
                }
            }
            
            function getFieldIndex(field) {
                const fields = ['name', 'age', 'department', 'salary'];
                return fields.indexOf(field) + 1;
            }
            
            // 绑定排序按钮
            document.getElementById("sort-name").addEventListener("click", () => sortTable("name"));
            document.getElementById("sort-age").addEventListener("click", () => sortTable("age"));
            document.getElementById("sort-salary").addEventListener("click", () => sortTable("salary"));
            
            // 4. 高亮功能
            document.getElementById("highlight-btn").addEventListener("click", function() {
                const cells = document.querySelectorAll("#data-table tbody td:nth-child(4)");
                
                cells.forEach(cell => {
                    const salary = parseInt(cell.textContent);
                    if (salary > 8000) {
                        // 先清除之前的高亮
                        cell.classList.remove("highlight");
                        
                        // 强制重绘
                        void cell.offsetWidth;
                        
                        // 添加高亮动画
                        gsap.fromTo(cell,
                            { backgroundColor: "#fff59d", scale: 1.1 },
                            {
                                duration: 1,
                                backgroundColor: "#fffde7",
                                scale: 1,
                                ease: "elastic.out(1, 0.5)"
                            }
                        );
                        cell.classList.add("highlight");
                    }
                });
            });
        });
    </script>
</body>
</html>
